<template>
  <div class="SearchDetail">
    <div class="Top">
      <h3>搜索 {{ $route.params.value }} 的结果</h3>
      <p>你可能感兴趣</p>
      <div class="search-card">
        <div class="artist card" v-if="detail.artist" @click="singerClick(detail.artist[0].id)">
          <img v-lazy="detail.artist[0].picUrl" alt="" />
          <div class="right">
            <div class="singer">
              <span>{{ detail.artist[0].occupation }}:</span>
              <span>{{ detail.artist[0].name }}</span>
              <span v-if="detail.artist[0].alias"> ({{ detail.artist[0].alias[0] }}) </span>
            </div>
            <div class="fans">
              <span>粉丝:{{ detail.artist[0].fansSize | countFormat }},</span>
              <span>歌曲:{{ detail.artist[0].musicSize }}</span>
            </div>
          </div>
        </div>
        <div class="album card" v-if="detail.album" @click="albumClick(detail.album[0].id)">
          <img v-lazy="detail.album[0].picUrl" alt="" />
          <div class="right">
            <div class="singer">
              <span>专辑:</span>
              <span>{{ detail.album[0].name }}</span>
              <span v-if="detail.album[0].alias">({{ detail.album[0].alias[0] }})</span>
            </div>
            <div class="fans">
              <span>{{ detail.album[0].artist.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- tab切换页 -->
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="单曲" name="first">
        <div class="Button"><MyButton :list="searchList.musicList"></MyButton></div>
        <Table :tableData="searchList.musicList" :config="config"></Table>
      </el-tab-pane>
      <el-tab-pane label="专辑" name="second">
        <List :list="searchList.albumList" @itemClick="albumClick"></List>
      </el-tab-pane>
      <el-tab-pane label="歌手" name="third">
        <List :list="searchList.artistList" @itemClick="singerClick"></List>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="fourth">
        <List :list="searchList.playList" @itemClick="playListClick"></List>
      </el-tab-pane>
      <el-tab-pane label="MV" name="fifth">
        <MvList :mvs="searchList.mvList"></MvList>
      </el-tab-pane>
      <el-tab-pane label="用户" name="six">
        <List :list="searchList.userList" @itemClick="userListClick"></List>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Table from '@/components/table/Table';
import MyButton from '@/components/mybutton/MyButton';
import List from '@/components/list/List';
import MvList from '@/components/list/MvList';
export default {
  data() {
    return {
      value: '',
      detail: '',
      activeName: 'first',
      currentIndex: '0',
      type: 1,
      typeInfo: [1, 10, 100, 1000, 1004, 1002],
      searchList: {
        musicList: [],
        albumList: [],
        artistList: [],
        playList: [],
        mvList: [],
        userList: [],
      },
      //表格参数配置
      config: {
        width: 300,
        showTodos: true,
        showAlbum: true,
      },
    };
  },
  components: { Table, MyButton, List, MvList },
  created() {
    this.value = this.$route.params.value;
    this.getSearchDetail();
    this.getSearchResult();
  },
  methods: {
    //获取搜索详情
    async getSearchDetail() {
      const { result } = await this.$request('/search/multimatch', { keywords: this.value });
      this.detail = result;
    },
    //搜索全部结果 type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV,
    async getSearchResult() {
      const { result } = await this.$request('/cloudsearch', {
        keywords: this.value,
        type: this.type,
      });
      //case里的数值必须为字符串。因为tabs插件里的index就是字符串类型
      switch (this.currentIndex) {
        case '0':
          this.searchList.musicList = Object.freeze(result.songs);
          break;
        case '1':
          this.searchList.albumList = Object.freeze(result.albums);
          break;
        case '2':
          this.searchList.artistList = Object.freeze(result.artists);
          break;
        case '3':
          this.searchList.playList = Object.freeze(result.playlists);
          break;
        case '4':
          this.searchList.mvList = Object.freeze(result.mvs);
          break;
        case '5':
          this.searchList.userList = Object.freeze(result.userprofiles);
          break;
      }
    },
    tabClick(e) {
      this.currentIndex = e.index;
      this.type = this.typeInfo[e.index];
      this.getSearchResult();
    },
    //点击专辑的回调
    albumClick(id) {
      this.$router.push('/albumdetail/' + id).catch((error) => {});
    },
    //点击歌手的回调
    singerClick(id) {
      this.$router.push('/artistdetail/' + id).catch((error) => {});
    },
    //点击歌单回调
    playListClick(id) {
      this.$router.push('/songsmenudetail/' + id).catch((error) => {});
    },
    //点击用户回调
    userListClick(id) {
      this.$router.push('/userdetail/' + id).catch((error) => {});
    },
  },
  watch: {
    '$route.params.value'(value) {
      if (!value) return;
      this.searchList.musicList = [];
      this.value = value;
      this.type = 1;
      this.activeName = 'first';
      this.currentIndex = '0';
      this.getSearchDetail();
      this.getSearchResult();
    },
  },
};
</script>

<style scoped='scoped' lang='scss'>
.SearchDetail {
  .Top {
    p {
      font-size: 12px;
      color: #919191;
    }
    .search-card {
      display: flex;
      .card {
        width: 250px;
        height: 65px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        background-color: #f4f4f4;
        border-radius: 5px;
        cursor: pointer;
        img {
          @include image(45px, 50%);
          margin: 10px;
        }
        .right {
          .singer {
            width: 160px;
            font-size: 13px;
            @include hidWord;
            :last-child {
              color: #919191;
            }
          }
          .fans {
            font-size: 12px;
            color: #919191;
          }
        }
      }
    }
  }
  .Button {
    margin-top: 10px;
  }
}
</style>